<nb-card>
	<nb-card-header>
		<div class="main-header" *ngIf="showHeader">
			<h4>
				<ngx-header-title>
					{{ 'MENU.APPOINTMENTS' | translate }}
				</ngx-header-title>
			</h4>
			<div style="float: right">
				<button
					status="info"
					size="small"
					outline
					nbButton
					routerLink="/pages/employees/schedules/recurring-availability"
				>
					{{ 'BUTTONS.SCHEDULES' | translate }}
				</button>
				<ng-template ngxPermissionsOnly="EVENT_TYPES_VIEW">
					<button
						class="mr-2 ml-2"
						status="warning"
						size="small"
						outline
						nbButton
						(click)="openEventTypes()"
					>
						{{ 'BUTTONS.EVENT_TYPES' | translate }}
					</button>
				</ng-template>
				<button
					status="primary"
					outline
					size="small"
					nbButton
					(click)="bookPublicAppointment()"
				>
					{{ 'BUTTONS.PUBLIC_APPOINTMENT_BOOK' | translate }}
				</button>
			</div>
		</div>
		<div class="block-info">
			{{ 'PUBLIC_APPOINTMENTS.TIMEZONE' | translate }}
			<strong>
				{{ selectedTimeZoneName }} {{ selectedTimeZoneOffset }}
			</strong>
			<a style="cursor: pointer; color: var(--link-text-color)" (click)="selectTimezone()">{{
				'PUBLIC_APPOINTMENTS.CHANGE' | translate
			}}</a>
		</div>
	</nb-card-header>
	<nb-card-body>
		<div class="custom-calendar">
			<full-calendar
				#calendar
				[options]="calendarOptions"
			></full-calendar>
		</div>
	</nb-card-body>
</nb-card>
